# 导航栏组件
<template>
  <header class="sticky top-0 bg-white/90 backdrop-blur-sm shadow-sm z-30 transition-all duration-300">
    <div class="container mx-auto px-4 py-3">
      <nav class="flex items-center justify-between">
        <!-- 品牌标识 -->
        <div class="flex items-center space-x-2">
          <i class="fa fa-camera-retro text-primary text-2xl"></i>
          <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">光影瞬间</span>
        </div>

        <!-- 桌面导航（使用 router-link 跳转） -->
        <div class="hidden md:flex items-center space-x-1">
          <router-link to="/" class="nav-link font-medium" exact>首页</router-link>
          <router-link to="/gallery" class="nav-link font-medium">图库</router-link>
          <router-link to="/trending" class="nav-link font-medium">热门</router-link>
          <router-link to="/about" class="nav-link font-medium">关于</router-link>
        </div>

        <!-- 登录/注册按钮 -->
        <div class="flex items-center space-x-3">
          <button class="btn-outline hidden sm:block">登录</button>
          <button class="btn-primary">注册</button>
          <button class="md:hidden text-neutral text-xl" @click="toggleMobileMenu">
            <i class="fa fa-bars"></i>
          </button>
        </div>
      </nav>

      <!-- 移动端导航菜单（使用 router-link 跳转） -->
      <div class="md:hidden bg-white shadow-md absolute w-full left-0 top-full transform -translate-y-full opacity-0 transition-all duration-300 pointer-events-none" 
           :class="{'translate-y-0 opacity-100 pointer-events-auto': mobileMenuOpen}">
        <div class="container mx-auto px-4 py-3">
          <div class="flex flex-col space-y-3">
            <router-link to="/" class="py-2 px-3 rounded-lg hover:bg-gray-100" exact>首页</router-link>
            <router-link to="/gallery" class="py-2 px-3 rounded-lg hover:bg-gray-100">图库</router-link>
            <router-link to="/trending" class="py-2 px-3 rounded-lg hover:bg-gray-100">热门</router-link>
            <router-link to="/about" class="py-2 px-3 rounded-lg hover:bg-gray-100">关于</router-link>
            <button class="btn-outline w-full">登录</button>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  data() {
    return {
      mobileMenuOpen: false
    }
  },
  methods: {
    toggleMobileMenu() {
      this.mobileMenuOpen = !this.mobileMenuOpen
    }
  }
}
</script>